<template>
  <div class="q">
    <div class="wave-group center">
      <input required="" type="text" class="input" @keydown.enter="search" v-model="value" />
      <span class="bar"></span>
      <label class="label">
        <span class="label-char" style="--index: 0">请</span>
        <span class="label-char" style="--index: 1">输</span>
        <span class="label-char" style="--index: 2">如</span>
        <span class="label-char" style="--index: 3">密</span>
        <span class="label-char" style="--index: 3">文</span>
      </label>
    </div>
    <button class="button topleft" @click="search">解析</button>
    <!-- <input type="text" v-model="value" placeholder="请输入密文内容" @keydown.enter="search" /> -->
    <button class="cta" @click="$store.state.show = true">
      <span class="hover-underline-animation"> 创建新密文 </span>
      <!-- <svg viewBox="0 0 46 16" height="10" width="30" xmlns="http://www.w3.org/2000/svg" id="arrow-horizontal">
        <path
          transform="translate(30)"
          d="M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z"
          data-name="Path 10"
          id="Path_10"
        ></path>
      </svg> -->
    </button>
    <!-- <button type="submit" class="btn btn-primary" @click="search">就决定是你了</button> -->
  </div>
</template>

<script>
export default {
  name: 'OnewordCaidan',

  data() {
    return {
      value: '',
      data: ''
    }
  },

  mounted() {},

  methods: {
    async search() {
      // console.log(this.value)
      this.$store.dispatch('search', this.value)
      if (this.$store.state.status == 1) {
        this.postMessage()
      }
    },
    postMessage() {
      // 发送POST请求
      this.$axios
        .get('http://hn216.api.yesapi.cn/api/App/Table/GetMoreDataByMoreField', {
          params: {
            // 这里是请求体的数据
            //表名
            model_name: 'oneword',
            app_key: '089418167DCDAE1B02319B404DD5B4B0',
            sign: 'A4860B29A9C1C18D2F3AF1E2A45C2B7A',
            //字段名，多个字段用英文逗号隔开
            field_name_list: 'keyid',
            //字段对应参数
            field_value_list: this.value,
            yesapi_allow_origin: 1
          }
        })
        .then((response) => {
          // 处理请求成功的结果
          this.data = response.data.data.items
          console.log(this.data)
          if (this.data.length) {
            this.$store.state.word = this.data[0].words
            this.$store.state.title = this.data[0].userp
          } else {
            alert('什么都没有哦~~~')
          }
        })
        .catch((error) => {
          // 处理请求失败的错误
          console.error(error)
        })
    }
    //jsonp访问
    // jsonpPostData() {
    //   // JSON 请求
    //   let JSONparams = {
    //     params: {
    //       service: 'api/App/Table/GetMoreDataByMoreField',
    //       model_name: 'oneword',
    //       data: JSON.stringify({
    //         //字段名，多个字段用英文逗号隔开
    //         field_name_list: 'userp',
    //         //字段对应参数
    //         field_value_list: '云墨'
    //       }),
    //       app_key: '089418167DCDAE1B02319B404DD5B4B0',
    //       sign: 'A4860B29A9C1C18D2F3AF1E2A45C2B7A'
    //     },
    //     jsonp: 'callback' // 设置回调函数的参数的一个名字，默认是话是callback,
    //   }

    //   this.$jsonp('http://api.yesapi.cn/', JSONparams, {
    //     emulateJSON: false
    //   }).then((result) => {
    //     // 处理返回结果
    //     console.log(result.body)
    //   })
    // }
  }
}
</script>

<style  scoped>
input {
  border: none; /* 取消边框 */
  outline: none; /* 取消聚焦时的外边框 */
}

.q {
  z-index: 3;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
}
.q > div {
  flex: 0 0 100%;
}
.center {
  /* margin-left: 40%; */
}
.cta {
  border: none;
  background: none;
  display: block;
  margin-top: 12rem;
}

.cta span {
  padding-bottom: 7px;
  letter-spacing: 4px;
  font-size: 14px;
  /* padding-right: 15px; */
  text-transform: uppercase;
}

.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active svg {
  transform: scale(0.9);
}

.hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.wave-group {
  position: relative;
  width: 165px;
  position: absolute;
}

.wave-group .input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 150px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.wave-group .input:focus {
  outline: none;
}

.wave-group .label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.wave-group .label-char {
  -webkit-transition: 0.2s ease all;
  transition: 0.2s ease all;
  -webkit-transition-delay: calc(var(--index) * 0.05s);
  transition-delay: calc(var(--index) * 0.05s);
}

.wave-group .input:focus ~ label .label-char,
.wave-group .input:valid ~ label .label-char {
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  font-size: 14px;
  color: #5264ae;
}

.wave-group .bar {
  position: relative;
  display: block;
  width: 165px;
}

.wave-group .bar:before,
.wave-group .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264ae;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.wave-group .bar:before {
  left: 50%;
}

.wave-group .bar:after {
  right: 50%;
}

.wave-group .input:focus ~ .bar:before,
.wave-group .input:focus ~ .bar:after {
  width: 50%;
}
.button {
  padding: 0.3rem 0.5rem;
  border: 0.2rem solid #443;
  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  color: #443;
  background: none;
  cursor: pointer;
  margin-top: 1rem;
  font-size: 0.1rem;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.topleft {
  position: absolute;
  /* margin-left: 10rem; */
  margin-top: 6rem;
}
.button:hover {
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  border: 0.2rem dashed #443;
}
</style>